{% load static %}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/userinfo.css' %}">

    <title>个人信息页面</title>
</head>
<body>

<div class="base">

    <div id="headCon " class="clearfix:after clearfix">
        <div class="w">
            <div class="logo">
                <img src="{% static 'image/u3 (1).svg' %}">
            </div>
            <div class="Nav">
                <a href="{% url 'contents:index' %}" class="link">职业画像</a>
                <a href="" class="link">AI求职指导</a>
                <a href="" class="link">精品课程</a>
                <a href="" class="link">多数据源</a>
                <a href="" class="link">博客文章</a>
                <a href="" class="link">创始团队</a>
                <a href="" class="link">价格</a>
                {% if request.user.is_authenticated %}
                    <button class="btn"> {{ request.user.email|slice:":5" }}</button>

                {% else %}
                <button class="btn">登录</button>
                {% endif %}
            </div>
        </div>
    </div>


<form name="sid"  method="post">
    <div class="box">


        <div class="image1">
            <img class="left" src="{% static 'image/huojian.png' %}" width="100px" height="100px">
        </div>

        <div class="box1">
                {% csrf_token %}
                <div class="login-buttons">
                    <div class="login-button">
                        <label class="h5">姓名：</label>

                        <input name="name" class="submit" type="text" value="{{ name|default_if_none:"" }}">
                    </div>

                    <div class="login-button">
                        <label class="h5">年龄：</label>

                       <input name="age" class="submit" type="text" value="{{ age|default_if_none:"" }}">
                    </div>

                    <div class="login-button">
                        <label class="h5">性别：</label>

                        <input name="gender" class="submit" type="text" value="{{ gender|default_if_none:"" }}">
                    </div>

                    <div class="login-button">
                        <label class="h5">邮箱：</label>

                        <input name="email" class="submit" type="text" value="{{ request.user.email|default_if_none:"" }}">
                    </div>

                    <div class="login-button">
                        <label class="h5"><span>微信：</span></label>

                       <input name="wx" class="submit" type="text" value="{{ wx|default_if_none:"" }}">
                    </div>
                </div>

                <input onclick="location.href='{% url 'users:logout' %}'" type="button" class="btn1" id="saveButton"  value="退出登录">


        </div>

        <div class="text1">
            <h1>个人信息</h1>
            <h6>Personal Information</h6>
        </div>

        <div class="box2">

            <div class="login-buttons">
                <div class="login-button">
                    <label class="h5">学校：</label>


                   <input name="school" class="submit" type="text" value="{{ school|default_if_none:"" }}">

                </div>

                <div class="login-button">
                    <label class="h5">学院：</label>


                        <input name="faculty" class="submit" type="text" value="{{ faculty|default_if_none:"" }}">


                </div>

                <div class="login-button">
                    <label class="h5">专业：</label>

                        <input name="major" class="submit" type="text" value="{{ major|default_if_none:"" }}">
                </div>

                <div class="login-button">
                    <label class="h5">年级：</label>


                   <input name="grade" class="submit" type="text" value="{{ grade|default_if_none:"" }}">

                </div>

                <div class="login-button">
                    <label class="h5"><span>学号：</span></label>


                    <input class="submit" type="text" value="{{ sid|default_if_none:"" }}">

                </div>
            </div>



                <input type="submit" class="btn2" value="保存资料">



        </div>

        <div class="image2">
            <img src="{% static 'image/right-huojian.png' %}" width="100" height="100">
        </div>
        <div class="image3">
            <img src="{% static 'image/right-huojian.png' %}" width="50" height="50">
        </div>

    </div>

</form>

</div>





<!-- 弹窗内容 -->
<div class="overlay" id="overlay">
    <div class="modal">
        <h2>保存资料成功！</h2>
        <button class="submit" id="closeButton">关闭</button>
    </div>
</div>

<script>
    const saveButton = document.getElementById('saveButton');
    const overlay = document.getElementById('overlay');
    const closeButton = document.getElementById('closeButton');

    saveButton.addEventListener('click', () => {
        overlay.style.display = 'flex';
    });

    closeButton.addEventListener('click', () => {
        overlay.style.display = 'none';
    });
</script>

</body>
</html>